'use client';

import { useAuth } from '@/hooks/use-auth';
import { UserRole } from '@/types';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, Suspense } from 'react';
import { 
  Users, Book, MessageSquare, Bell, Award, School, Settings, 
  FileText, Newspaper, Calendar, ClipboardList, UserCheck,
  GraduationCap, BookOpen, ChartBar, Activity
} from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { 
  getNotifications, 
  NotificationType, 
  NotificationStatus, 
  TargetRole,
  Notification 
} from '@/services/notificationService';

// 主页面组件
export default function DashboardPage() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <DashboardContent />
    </Suspense>
  );
}

// 内容组件，包含 useSearchParams
function DashboardContent() {
  const { user } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();
  const tab = searchParams.get('tab');
  const defaultTab = tab || 'study';
  
  // 添加状态
  const [announcements, setAnnouncements] = useState<Notification[]>([]);
  const [news, setNews] = useState<Notification[]>([]);
  const [showAllDialog, setShowAllDialog] = useState(false);
  const [dialogType, setDialogType] = useState<'news' | 'announcements'>('news');
  const [showScoresDialog, setShowScoresDialog] = useState(false);
  const [showHomeworkDialog, setShowHomeworkDialog] = useState(false);
  const [showAttendanceDialog, setShowAttendanceDialog] = useState(false);
  const [showAwardsDialog, setShowAwardsDialog] = useState(false);
  const [showCommentsDialog, setShowCommentsDialog] = useState(false);

  // 假数据
  const mockAnnouncements = [
    {
      id: 1,
      title: '期中考试安排通知',
      content: '各位家长好，我校将于下周一至周三（4月8日-4月10日）进行期中考试。考试科目包括语文、数学、英语、科学等。请督促孩子做好复习准备，保持良好的作息时间。考试期间，请确保孩子准时到校，携带必要的文具用品。',
      publisher: { id: 1, name: '教务处' },
      createTime: '2024-04-01T10:00:00',
      isTop: true,
      type: NotificationType.ANNOUNCEMENT,
      status: NotificationStatus.PUBLISHED,
      targetRole: TargetRole.PARENT
    },
    {
      id: 2,
      title: '春季运动会预告',
      content: '为了增强学生体质，培养团队精神，我校将于4月15日举行春季运动会。比赛项目包括：短跑、跳远、接力赛等。请家长们为孩子准备运动服和水壶，并在可能的情况下到场为孩子加油助威。',
      publisher: { id: 2, name: '体育组' },
      createTime: '2024-04-02T09:30:00',
      isTop: false,
      type: NotificationType.ANNOUNCEMENT,
      status: NotificationStatus.PUBLISHED,
      targetRole: TargetRole.PARENT
    },
    {
      id: 3,
      title: '家长会通知',
      content: '定于本周六（4月6日）上午9:00在学校报告厅召开本学期家长会，请各位家长准时参加。会议内容包括：学期教学计划、班级管理、教育心得分享等。',
      publisher: { id: 3, name: '王老师' },
      createTime: '2024-04-03T14:00:00',
      isTop: false,
      type: NotificationType.ANNOUNCEMENT,
      status: NotificationStatus.PUBLISHED,
      targetRole: TargetRole.PARENT
    }
  ];

  const mockNews = [
    {
      id: 1,
      title: '我校在市科技创新大赛中获得佳绩',
      content: '在上周举行的市科技创新大赛中，我校学生表现优异，共获得一等奖2项、二等奖3项、三等奖5项。其中，六年级张小明同学的"智能垃圾分类机器人"项目受到评委一致好评，展现了我校学生的创新能力和实践水平。',
      publisher: { id: 4, name: '校团委' },
      createTime: '2024-04-01T16:00:00',
      isTop: true,
      type: NotificationType.NEWS,
      status: NotificationStatus.PUBLISHED,
      targetRole: TargetRole.PARENT
    },
    {
      id: 2,
      title: '校园艺术节圆满落幕',
      content: '为期一周的校园艺术节昨日圆满结束。本次艺术节以"放飞梦想，绽放童年"为主题，举办了绘画展、音乐会、戏剧表演等丰富多彩的活动。学生们在活动中展现了才艺，收获了快乐，也增进了同学间的友谊。',
      publisher: { id: 5, name: '艺术组' },
      createTime: '2024-03-31T15:30:00',
      isTop: false,
      type: NotificationType.NEWS,
      status: NotificationStatus.PUBLISHED,
      targetRole: TargetRole.PARENT
    },
    {
      id: 3,
      title: '教师教学能力提升培训成功举办',
      content: '为提高教师队伍的专业素养，我校于上周末举办了为期两天的教师教学能力提升培训。培训邀请了教育专家进行专题讲座，内容涵盖现代教育技术应用、课堂管理技巧、教学方法创新等方面。',
      publisher: { id: 1, name: '教务处' },
      createTime: '2024-03-30T09:00:00',
      isTop: false,
      type: NotificationType.NEWS,
      status: NotificationStatus.PUBLISHED,
      targetRole: TargetRole.PARENT
    }
  ];

  // 假数据 - 详细成绩记录
  const mockDetailedScores = [
    {
      id: 1,
      type: '期中考试',
      date: '2024-03-15',
      scores: [
        { subject: '语文', score: 92, rank: '5/45', comment: '作文表现优秀，阅读理解需加强' },
        { subject: '数学', score: 96, rank: '3/45', comment: '计算准确，思维敏捷' },
        { subject: '英语', score: 94, rank: '4/45', comment: '听说能力突出，写作有进步' },
        { subject: '科学', score: 98, rank: '2/45', comment: '实验操作认真，观察细致' }
      ]
    },
    {
      id: 2,
      type: '单元测试',
      date: '2024-02-28',
      scores: [
        { subject: '语文', score: 90, rank: '6/45', comment: '基础知识掌握扎实' },
        { subject: '数学', score: 95, rank: '4/45', comment: '解题思路清晰' },
        { subject: '英语', score: 92, rank: '5/45', comment: '词汇量丰富' },
        { subject: '科学', score: 96, rank: '3/45', comment: '理解能力强' }
      ]
    }
  ];

  // 假数据 - 详细作业记录
  const mockDetailedHomework = [
    {
      id: 1,
      subject: '数学',
      title: '数学练习册',
      status: '已完成',
      deadline: '2024-03-20 20:00',
      submitTime: '2024-03-20 19:30',
      score: 95,
      comment: '计算准确，书写工整'
    },
    {
      id: 2,
      subject: '英语',
      title: '单词默写',
      status: '待完成',
      deadline: '2024-03-21 18:00',
      submitTime: null,
      score: null,
      comment: null
    },
    {
      id: 3,
      subject: '语文',
      title: '周末作文',
      status: '已完成',
      deadline: '2024-03-19 20:00',
      submitTime: '2024-03-19 15:30',
      score: 92,
      comment: '文章结构完整，描写生动'
    }
  ];

  // 假数据 - 详细考勤记录
  const mockDetailedAttendance = [
    {
      id: 1,
      date: '2024-03-20',
      status: '正常',
      checkInTime: '07:45',
      checkOutTime: '16:30'
    },
    {
      id: 2,
      date: '2024-03-19',
      status: '正常',
      checkInTime: '07:50',
      checkOutTime: '16:30'
    },
    {
      id: 3,
      date: '2024-03-18',
      status: '请假',
      reason: '感冒发烧',
      approver: '王老师'
    }
  ];

  // 假数据 - 详细奖惩记录
  const mockDetailedAwards = [
    {
      id: 1,
      type: '奖励',
      title: '三好学生',
      date: '2024-03-01',
      description: '表现优异，品学兼优',
      issuer: '学校德育处'
    },
    {
      id: 2,
      type: '奖励',
      title: '数学竞赛三等奖',
      date: '2024-02-15',
      description: '校内数学竞赛获奖',
      issuer: '教务处'
    },
    {
      id: 3,
      type: '表扬',
      title: '优秀班干部',
      date: '2024-01-20',
      description: '工作认真负责，表现突出',
      issuer: '班主任'
    }
  ];

  // 假数据 - 详细评语记录
  const mockDetailedComments = [
    {
      id: 1,
      subject: '数学',
      teacher: '王老师',
      date: '2024-03-15',
      content: '小明在课堂上很积极发言，善于思考。建议可以多关注数学应用题的解题思路，提高解决问题的能力。'
    },
    {
      id: 2,
      subject: '语文',
      teacher: '李老师',
      date: '2024-03-14',
      content: '作文有很大进步，描写更加细腻。建议继续加强阅读量，扩充词汇量。'
    },
    {
      id: 3,
      subject: '英语',
      teacher: '张老师',
      date: '2024-03-13',
      content: '口语表达流畅，听力理解准确。希望在写作方面多加练习，注意语法细节。'
    }
  ];

  // 初始化数据
  useEffect(() => {
    if (user?.role === UserRole.PARENT) {
      setAnnouncements(mockAnnouncements);
      setNews(mockNews);
    }
  }, [user]);

  const handleTabChange = (value: string) => {
    router.push(`/?tab=${value}`);
  };

  const showAllContent = (type: 'news' | 'announcements') => {
    setDialogType(type);
    setShowAllDialog(true);
  };

  const getParentDashboard = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            我的子女
          </CardTitle>
          <CardDescription>选择要查看的子女信息</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex gap-6 py-4 px-2">
            <Button variant="outline" className="flex flex-col items-center gap-3 p-6 min-w-[160px] h-auto">
              <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                <GraduationCap className="h-8 w-8 text-primary" />
              </div>
              <div className="space-y-1 text-center">
                <span className="text-lg font-medium">张小明</span>
                <span className="text-sm text-muted-foreground block">三年级二班</span>
              </div>
            </Button>
            <Button variant="outline" className="flex flex-col items-center gap-3 p-6 min-w-[160px] h-auto">
              <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                <GraduationCap className="h-8 w-8 text-primary" />
              </div>
              <div className="space-y-1 text-center">
                <span className="text-lg font-medium">张小红</span>
                <span className="text-sm text-muted-foreground block">一年级三班</span>
              </div>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <School className="h-5 w-5" />
            学校信息
          </CardTitle>
          <CardDescription>查看学校概况和最新动态</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="bg-muted p-4 rounded-lg">
              <h4 className="font-medium mb-2">阳光实验小学</h4>
              <p className="text-sm text-muted-foreground">
                创建于1995年，是一所以"德智体美劳全面发展"为办学理念的现代化义务教育阶段学校。
              </p>
            </div>
            <Button asChild className="w-full">
              <Link href="/school">查看学校详情</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Suspense fallback={<div>加载中...</div>}>
        <Tabs defaultValue={defaultTab} onValueChange={handleTabChange} className="space-y-4">
          <TabsList className="grid grid-cols-4 gap-4 h-auto p-1">
            <TabsTrigger value="study" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground py-2">
              <BookOpen className="h-4 w-4 mr-2" />
              学习情况
            </TabsTrigger>
            <TabsTrigger value="activities" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground py-2">
              <Activity className="h-4 w-4 mr-2" />
              班级活动
            </TabsTrigger>
            <TabsTrigger value="messages" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground py-2">
              <MessageSquare className="h-4 w-4 mr-2" />
              留言交流
            </TabsTrigger>
            <TabsTrigger value="notices" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground py-2">
              <Bell className="h-4 w-4 mr-2" />
              通知公告
            </TabsTrigger>
          </TabsList>

          <TabsContent value="study" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <GraduationCap className="h-5 w-5" />
                    学习成绩
                  </CardTitle>
                  <CardDescription>张小明 - 三年级二班</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <span>期中考试总分</span>
                      <span className="text-2xl font-bold">95分</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span>班级排名</span>
                      <span className="text-2xl font-bold">5/45</span>
                    </div>
                    <div className="border-t pt-2">
                      <div className="text-sm text-muted-foreground mb-2">各科成绩</div>
                      <div className="grid grid-cols-2 gap-2 text-sm">
                        <div>语文：92分</div>
                        <div>数学：96分</div>
                        <div>英语：94分</div>
                        <div>科学：98分</div>
                      </div>
                    </div>
                    <Button 
                      className="w-full"
                      onClick={() => setShowScoresDialog(true)}
                    >
                      查看成绩详情
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Book className="h-5 w-5" />
                    作业完成
                  </CardTitle>
                  <CardDescription>本周作业情况</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <span>完成率</span>
                      <span className="text-2xl font-bold">98%</span>
                    </div>
                    <div className="space-y-2">
                      <div className="bg-muted p-3 rounded-lg">
                        <div className="flex justify-between mb-1">
                          <span className="font-medium">数学练习册</span>
                          <span className="text-green-600">已完成</span>
                        </div>
                        <p className="text-sm text-muted-foreground">截止时间：今天 20:00</p>
                      </div>
                      <div className="bg-muted p-3 rounded-lg">
                        <div className="flex justify-between mb-1">
                          <span className="font-medium">英语单词默写</span>
                          <span className="text-yellow-600">待完成</span>
                        </div>
                        <p className="text-sm text-muted-foreground">截止时间：明天 18:00</p>
                      </div>
                    </div>
                    <Button 
                      className="w-full"
                      onClick={() => setShowHomeworkDialog(true)}
                    >
                      查看全部作业
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <UserCheck className="h-5 w-5" />
                    考勤记录
                  </CardTitle>
                  <CardDescription>本月考勤统计</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <span>出勤率</span>
                      <span className="text-2xl font-bold">98%</span>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span>正常出勤</span>
                        <span>20天</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>请假</span>
                        <span>1天</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>迟到</span>
                        <span>0次</span>
                      </div>
                    </div>
                    <Button 
                      className="w-full"
                      onClick={() => setShowAttendanceDialog(true)}
                    >
                      查看考勤详情
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Award className="h-5 w-5" />
                    奖惩记录
                  </CardTitle>
                  <CardDescription>最近的奖惩情况</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="bg-muted p-3 rounded-lg">
                      <div className="flex items-start gap-3">
                        <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                          <Award className="h-4 w-4 text-green-600" />
                        </div>
                        <div>
                          <p className="font-medium">三好学生</p>
                          <p className="text-sm text-muted-foreground">表现优异，品学兼优</p>
                          <p className="text-xs text-muted-foreground mt-1">2024-03-01</p>
                        </div>
                      </div>
                    </div>
                    <div className="bg-muted p-3 rounded-lg">
                      <div className="flex items-start gap-3">
                        <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                          <Award className="h-4 w-4 text-blue-600" />
                        </div>
                        <div>
                          <p className="font-medium">数学竞赛三等奖</p>
                          <p className="text-sm text-muted-foreground">校内数学竞赛获奖</p>
                          <p className="text-xs text-muted-foreground mt-1">2024-02-15</p>
                        </div>
                      </div>
                    </div>
                    <Button 
                      className="w-full"
                      onClick={() => setShowAwardsDialog(true)}
                    >
                      查看全部记录
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    老师评语
                  </CardTitle>
                  <CardDescription>老师的评价和建议</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="bg-muted p-3 rounded-lg">
                      <p className="text-sm">小明在课堂上很积极发言，善于思考。建议可以多关注数学应用题的解题思路，提高解决问题的能力。</p>
                      <div className="flex justify-between items-center mt-2">
                        <p className="text-xs text-muted-foreground">数学 - 王老师</p>
                        <p className="text-xs text-muted-foreground">2024-03-15</p>
                      </div>
                    </div>
                    <div className="bg-muted p-3 rounded-lg">
                      <p className="text-sm">作文有很大进步，描写更加细腻。建议继续加油！</p>
                      <div className="flex justify-between items-center mt-2">
                        <p className="text-xs text-muted-foreground">语文 - 李老师</p>
                        <p className="text-xs text-muted-foreground">2024-03-14</p>
                      </div>
                    </div>
                    <Button 
                      className="w-full"
                      onClick={() => setShowCommentsDialog(true)}
                    >
                      查看全部评语
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="activities" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="bg-muted rounded-lg overflow-hidden">
                <div className="aspect-video relative bg-muted">
                  <img
                    src="https://images.unsplash.com/photo-1571210862729-78a52d3779a2"
                    alt="班级秋游活动"
                    className="object-cover w-full h-full"
                  />
                </div>
                <div className="p-4">
                  <h4 className="font-medium mb-1">班级秋游活动</h4>
                  <p className="text-sm text-muted-foreground mb-2">
                    今天我们班级组织了秋游活动，同学们在植物园度过了愉快的一天。大家观察了各种植物，学习了植物知识，还进行了团队合作游戏，增进了同学间的友谊。
                  </p>
                  <div className="flex justify-between items-center text-xs text-muted-foreground">
                    <span>王老师</span>
                    <span>2023-10-20</span>
                  </div>
                </div>
              </div>
              <div className="bg-muted rounded-lg overflow-hidden">
                <div className="aspect-video relative bg-muted">
                  <img
                    src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45"
                    alt="科学实验课"
                    className="object-cover w-full h-full"
                  />
                </div>
                <div className="p-4">
                  <h4 className="font-medium mb-1">科学实验课</h4>
                  <p className="text-sm text-muted-foreground mb-2">
                    今天的科学课上，同学们进行了有趣的"水的净化"实验。通过这个实验，大家学习了水的过滤和净化原理，了解了保护水资源的重要性。同学们都表现得非常积极！
                  </p>
                  <div className="flex justify-between items-center text-xs text-muted-foreground">
                    <span>张老师</span>
                    <span>2023-10-15</span>
                  </div>
                </div>
              </div>
            </div>
            <Button asChild variant="outline" className="w-full">
              <Link href="/activities">查看更多活动</Link>
            </Button>
          </TabsContent>

          <TabsContent value="messages" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    给孩子留言
                  </CardTitle>
                  <CardDescription>给孩子写一些鼓励的话</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <ScrollArea className="h-[300px] pr-4">
                      <div className="space-y-4">
                        <div className="bg-muted p-3 rounded-lg">
                          <div className="flex items-start gap-3">
                            <Avatar>
                              <AvatarImage src="/avatars/parent.png" />
                              <AvatarFallback>妈妈</AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <p className="text-sm">加油，小明！妈妈相信你一定能在这次考试中取得好成绩！</p>
                              <p className="text-xs text-muted-foreground mt-1">2024-03-18 08:30</p>
                            </div>
                          </div>
                        </div>
                        <div className="bg-primary/10 p-3 rounded-lg">
                          <div className="flex items-start gap-3">
                            <Avatar>
                              <AvatarImage src="/avatars/child.png" />
                              <AvatarFallback>小明</AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <p className="text-sm">谢谢妈妈，我会努力的！</p>
                              <p className="text-xs text-muted-foreground mt-1">2024-03-18 12:30</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ScrollArea>
                    <div className="flex gap-2">
                      <input
                        type="text"
                        placeholder="写下你想说的话..."
                        className="flex-1 min-h-[40px] rounded-md border border-input bg-background px-3 py-2 text-sm"
                      />
                      <Button>发送</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    与老师交流
                  </CardTitle>
                  <CardDescription>与班主任和任课老师交流</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <ScrollArea className="h-[300px] pr-4">
                      <div className="space-y-4">
                        <div className="bg-muted p-3 rounded-lg">
                          <div className="flex items-start gap-3">
                            <Avatar>
                              <AvatarImage src="/avatars/teacher.png" />
                              <AvatarFallback>王老师</AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <p className="text-sm">小明这周在数学课上表现很好，积极回答问题。</p>
                              <p className="text-xs text-muted-foreground mt-1">数学 - 王老师 · 2024-03-18</p>
                            </div>
                          </div>
                        </div>
                        <div className="bg-primary/10 p-3 rounded-lg">
                          <div className="flex items-start gap-3">
                            <Avatar>
                              <AvatarImage src="/avatars/parent.png" />
                              <AvatarFallback>家长</AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <p className="text-sm">谢谢王老师，请问有什么需要在家里特别注意的地方吗？</p>
                              <p className="text-xs text-muted-foreground mt-1">2024-03-18</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ScrollArea>
                    <div className="flex gap-2">
                      <input
                        type="text"
                        placeholder="请输入消息..."
                        className="flex-1 min-h-[40px] rounded-md border border-input bg-background px-3 py-2 text-sm"
                      />
                      <Button>发送</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="notices" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Bell className="h-5 w-5" />
                    学校通知
                  </CardTitle>
                  <CardDescription>重要通知和公告</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {announcements.slice(0, 2).map((announcement) => (
                      <div key={announcement.id} className="bg-muted p-4 rounded-lg">
                        <div className="flex items-center gap-2 mb-2">
                          <Bell className="h-4 w-4 text-primary" />
                          <span className="font-medium">{announcement.title}</span>
                          {announcement.isTop && (
                            <Badge variant="secondary">置顶</Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mb-2 line-clamp-2">
                          {announcement.content}
                        </p>
                        <div className="flex justify-between items-center text-xs text-muted-foreground">
                          <span>{announcement.publisher?.name}</span>
                          <span>{new Date(announcement.createTime).toLocaleDateString()}</span>
                        </div>
                      </div>
                    ))}
                    <Button 
                      variant="outline" 
                      className="w-full"
                      onClick={() => showAllContent('announcements')}
                    >
                      查看更多通知
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Newspaper className="h-5 w-5" />
                    校园新闻
                  </CardTitle>
                  <CardDescription>学校近期新闻</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {news.slice(0, 2).map((newsItem) => (
                      <div key={newsItem.id} className="bg-muted rounded-lg overflow-hidden">
                        <div className="aspect-video relative">
                          <img
                            src={
                              newsItem.id === 1 
                                ? "https://img.freepik.com/free-photo/kids-participating-science-fair_23-2149043756.jpg"
                                : "https://img.freepik.com/free-photo/children-performing-stage_23-2149643213.jpg"
                            }
                            alt={newsItem.title}
                            className="object-cover w-full h-full"
                          />
                        </div>
                        <div className="p-4">
                          <h4 className="font-medium mb-1">{newsItem.title}</h4>
                          <p className="text-sm text-muted-foreground line-clamp-2">
                            {newsItem.content}
                          </p>
                          <div className="flex justify-between items-center text-xs text-muted-foreground mt-2">
                            <span>{newsItem.publisher?.name}</span>
                            <span>{new Date(newsItem.createTime).toLocaleDateString()}</span>
                          </div>
                        </div>
                      </div>
                    ))}
                    <Button 
                      variant="outline" 
                      className="w-full"
                      onClick={() => showAllContent('news')}
                    >
                      查看更多新闻
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 查看全部内容的对话框 */}
            <Dialog open={showAllDialog} onOpenChange={setShowAllDialog}>
              <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
                <DialogHeader>
                  <DialogTitle>
                    {dialogType === 'news' ? '校园新闻' : '学校通知'}
                  </DialogTitle>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  {dialogType === 'news' ? (
                    news.map((newsItem) => (
                      <div key={newsItem.id} className="bg-muted rounded-lg overflow-hidden">
                        <div className="aspect-video relative">
                          <img
                            src={
                              newsItem.id === 1 
                                ? "https://img.freepik.com/free-photo/kids-participating-science-fair_23-2149043756.jpg"
                                : newsItem.id === 2 
                                  ? "https://img.freepik.com/free-photo/children-performing-stage_23-2149643213.jpg"
                                  : "https://img.freepik.com/free-photo/teachers-day-celebration-school_23-2149241011.jpg"
                            }
                            alt={newsItem.title}
                            className="object-cover w-full h-full"
                          />
                        </div>
                        <div className="p-4">
                          <h4 className="font-medium mb-1">{newsItem.title}</h4>
                          <p className="text-sm text-muted-foreground">
                            {newsItem.content}
                          </p>
                          <div className="flex justify-between items-center text-xs text-muted-foreground mt-2">
                            <span>{newsItem.publisher?.name}</span>
                            <span>{new Date(newsItem.createTime).toLocaleDateString()}</span>
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    announcements.map((announcement) => (
                      <div key={announcement.id} className="bg-muted p-4 rounded-lg">
                        <div className="flex items-center gap-2 mb-2">
                          <Bell className="h-4 w-4 text-primary" />
                          <span className="font-medium">{announcement.title}</span>
                          {announcement.isTop && (
                            <Badge variant="secondary">置顶</Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mb-2">
                          {announcement.content}
                        </p>
                        <div className="flex justify-between items-center text-xs text-muted-foreground">
                          <span>{announcement.publisher?.name}</span>
                          <span>{new Date(announcement.createTime).toLocaleDateString()}</span>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </DialogContent>
            </Dialog>
          </TabsContent>
        </Tabs>
      </Suspense>
    </div>
  );

  const getTeacherDashboard = () => (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <School className="h-5 w-5" />
            学校信息
          </CardTitle>
          <CardDescription>查看学校概况和最新动态</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="bg-muted p-4 rounded-lg">
              <h4 className="font-medium mb-2">阳光实验小学</h4>
              <p className="text-sm text-muted-foreground">
                创建于1995年，是一所以"德智体美劳全面发展"为办学理念的现代化义务教育阶段学校。
              </p>
            </div>
            <Button asChild className="w-full">
              <Link href="/school">查看学校详情</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            班级概况
          </CardTitle>
          <CardDescription>班级学生情况统计</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <span>班级人数</span>
              <span className="text-2xl font-bold">45人</span>
            </div>
            <div className="flex justify-between items-center">
              <span>出勤率</span>
              <span className="text-2xl font-bold">98%</span>
            </div>
            <Button asChild className="w-full">
              <Link href="/overview">管理学生</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Book className="h-5 w-5" />
            作业管理
          </CardTitle>
          <CardDescription>最近布置的作业</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="border-l-4 border-primary pl-4">
              <p className="font-medium">数学习题第三章</p>
              <p className="text-sm text-muted-foreground">完成率: 85%</p>
            </div>
            <div className="border-l-4 border-primary pl-4">
              <p className="font-medium">语文作文</p>
              <p className="text-sm text-muted-foreground">完成率: 90%</p>
            </div>
            <Button asChild className="w-full">
              <Link href="/homework">布置作业</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            班级动态
          </CardTitle>
          <CardDescription>最近的班级活动和事件</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="bg-muted p-4 rounded-lg">
              <p className="font-medium">即将举行班会</p>
              <p className="text-sm text-muted-foreground">时间：周五下午</p>
            </div>
            <Button asChild variant="outline" className="w-full">
              <Link href="activities">发布通知</Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );

  const getAdminDashboard = () => (
    <div className="space-y-4">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">总学生数</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1,234</div>
            <p className="text-xs text-muted-foreground">较上月增长 2%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">教师数量</CardTitle>
            <UserCheck className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">86</div>
            <p className="text-xs text-muted-foreground">较上月增长 1%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">班级数量</CardTitle>
            <School className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">32</div>
            <p className="text-xs text-muted-foreground">本学期新增 2 个班</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">系统活跃度</CardTitle>
            <ChartBar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">92%</div>
            <p className="text-xs text-muted-foreground">较上周提升 5%</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5" />
              最新通知
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium">期中考试安排</p>
                  <p className="text-xs text-muted-foreground">2024-03-15</p>
                </div>
                <Button variant="outline" size="sm">查看</Button>
              </div>
              <div className="flex items-center gap-4">
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium">教师培训通知</p>
                  <p className="text-xs text-muted-foreground">2024-03-12</p>
                </div>
                <Button variant="outline" size="sm">查看</Button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Award className="h-5 w-5" />
              奖惩记录
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium">三好学生评选</p>
                  <p className="text-xs text-muted-foreground">已完成 80%</p>
                </div>
                <Button variant="outline" size="sm">详情</Button>
              </div>
              <div className="flex items-center gap-4">
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium">优秀班级评选</p>
                  <p className="text-xs text-muted-foreground">进行中</p>
                </div>
                <Button variant="outline" size="sm">详情</Button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Settings className="h-5 w-5" />
              快捷操作
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-2">
              <Button variant="outline" className="h-20 flex flex-col gap-2">
                <Users className="h-5 w-5" />
                用户管理
              </Button>
              <Button variant="outline" className="h-20 flex flex-col gap-2">
                <School className="h-5 w-5" />
                班级管理
              </Button>
              <Button variant="outline" className="h-20 flex flex-col gap-2">
                <FileText className="h-5 w-5" />
                发布通知
              </Button>
              <Button variant="outline" className="h-20 flex flex-col gap-2">
                <Settings className="h-5 w-5" />
                系统设置
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );

  const getDashboardContent = () => {
    switch (user?.role) {
      case UserRole.PARENT:
        return getParentDashboard();
      case UserRole.TEACHER:
        return getTeacherDashboard();
      case UserRole.ADMIN:
        return getAdminDashboard();
      default:
        return null;
    }
  };

  if (!user) {
    return null;
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-3xl font-bold tracking-tight">欢迎回来，{user.name}</h2>
        <p className="text-muted-foreground">
          这里是您的个人仪表板，您可以查看和管理所有相关信息。
        </p>
      </div>
      {getDashboardContent()}

      {/* 成绩详情模态框 */}
      <Dialog open={showScoresDialog} onOpenChange={setShowScoresDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>成绩详情</DialogTitle>
          </DialogHeader>
          <div className="space-y-6">
            {mockDetailedScores.map((exam) => (
              <div key={exam.id} className="space-y-4">
                <div className="flex justify-between items-center">
                  <h4 className="font-medium">{exam.type}</h4>
                  <span className="text-sm text-muted-foreground">{exam.date}</span>
                </div>
                <div className="grid gap-4 md:grid-cols-2">
                  {exam.scores.map((score, index) => (
                    <div key={index} className="bg-muted p-4 rounded-lg">
                      <div className="flex justify-between items-center mb-2">
                        <span className="font-medium">{score.subject}</span>
                        <span className="text-lg">{score.score}分</span>
                      </div>
                      <div className="text-sm text-muted-foreground">
                        <p>排名：{score.rank}</p>
                        <p>点评：{score.comment}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>

      {/* 作业完成情况模态框 */}
      <Dialog open={showHomeworkDialog} onOpenChange={setShowHomeworkDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>作业完成情况</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {mockDetailedHomework.map((homework) => (
              <div key={homework.id} className="bg-muted p-4 rounded-lg">
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <h4 className="font-medium">{homework.subject} - {homework.title}</h4>
                    <p className="text-sm text-muted-foreground">
                      截止时间：{homework.deadline}
                    </p>
                  </div>
                  <Badge variant={homework.status === '已完成' ? 'default' : 'secondary'}>
                    {homework.status}
                  </Badge>
                </div>
                {homework.status === '已完成' && (
                  <div className="text-sm space-y-1">
                    <p>提交时间：{homework.submitTime}</p>
                    <p>得分：{homework.score}</p>
                    <p>评语：{homework.comment}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>

      {/* 考勤记录模态框 */}
      <Dialog open={showAttendanceDialog} onOpenChange={setShowAttendanceDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>考勤记录</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {mockDetailedAttendance.map((record) => (
              <div key={record.id} className="bg-muted p-4 rounded-lg">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">{record.date}</span>
                  <Badge variant={record.status === '正常' ? 'default' : 'secondary'}>
                    {record.status}
                  </Badge>
                </div>
                {record.status === '正常' ? (
                  <div className="text-sm space-y-1">
                    <p>签到时间：{record.checkInTime}</p>
                    <p>签退时间：{record.checkOutTime}</p>
                  </div>
                ) : (
                  <div className="text-sm space-y-1">
                    <p>请假原因：{record.reason}</p>
                    <p>批准人：{record.approver}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>

      {/* 奖惩记录模态框 */}
      <Dialog open={showAwardsDialog} onOpenChange={setShowAwardsDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>奖惩记录</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {mockDetailedAwards.map((award) => (
              <div key={award.id} className="bg-muted p-4 rounded-lg">
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Award className="h-4 w-4 text-primary" />
                  </div>
                  <div className="flex-1">
                    <div className="flex justify-between items-start">
                      <div>
                        <h4 className="font-medium">{award.title}</h4>
                        <p className="text-sm text-muted-foreground">{award.description}</p>
                      </div>
                      <Badge variant="outline">{award.type}</Badge>
                    </div>
                    <div className="text-xs text-muted-foreground mt-2">
                      <p>颁发单位：{award.issuer}</p>
                      <p>获得时间：{award.date}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>

      {/* 老师评语模态框 */}
      <Dialog open={showCommentsDialog} onOpenChange={setShowCommentsDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>老师评语</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {mockDetailedComments.map((comment) => (
              <div key={comment.id} className="bg-muted p-4 rounded-lg">
                <div className="flex justify-between items-center mb-2">
                  <div>
                    <span className="font-medium">{comment.subject}</span>
                    <span className="text-sm text-muted-foreground ml-2">- {comment.teacher}</span>
                  </div>
                  <span className="text-sm text-muted-foreground">{comment.date}</span>
                </div>
                <p className="text-sm">{comment.content}</p>
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
